<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
</head>
<body>
    <!-- houdunren.com -->
    <!-- <div id="app">houdunren.com</div>
    <div id="cms">hdcms.com</div> -->

    <div id="app">
        houdunren.com
        <div id="cms">hdcms.com</div>
    </div>
    <script>
        //禁止复制文件
        // document.addEventListener('copy',() => {
        //     event.preventDefault();
        //     alert('禁止内容复制');
        // })
        
        // const app = document.querySelector(`#app`);
        // const cms = document.querySelector(`#cms`);
        // app.addEventListener('mouseout',() => {
        //     console.log(event.target);
        //     console.log(event.relatedTarget);
        // });
        
        //mouseenter与mouselevel不会产生冒泡,子元素和父元素来回移动的时候不会产生事件
        const app = document.querySelector(`#app`);
        const cms = document.querySelector(`#cms`);

        app.addEventListener('mouseenter' ,() => {
            console.log('app');
        });

        cms.addEventListener('mouseenter',() => {
            console.log('cms');
        });
        
    </script>
</body>
</html>